<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{currLcdInfo.name}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <form class="form-horizontal">
      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-8">
          <div class="checkbox">
            <label>
              <input type="checkbox" v-model="cfg.enable" :true-value=1 :false-value=0> {{$t('common.enable')}}
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('autoswitch.params.interval')}}</label>
        <div class="col-sm-8">
          <div class="input-group"> 
            <input type="range" class="form-control" v-model="cfg.interval" min="1" max="300" step="1">
            <span class="input-group-addon">{{cfg.interval}}</span>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('autoswitch.params.status')}}</label>
        <div class="col-sm-8">
          <label class="control-label">{{showStatus}}</label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('autoswitch.params.currLayoutName')}}</label>
        <div class="col-sm-8">
          <label class="control-label">{{state.currLayoutName}}</label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('autoswitch.params.switchCount')}}</label>
        <div class="col-sm-8">
          <label class="control-label">{{state.switchCount}}</label>
        </div>
      </div>
      <div class="form-group" v-show="state.status === 'aborted'">
        <label class="col-sm-3 control-label">{{$t('autoswitch.params.abortCode')}}</label>
        <div class="col-sm-8">
          <label class="control-label">{{showAbortCode}}</label>
        </div>
      </div>      
    </form> 
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onSaveChanges">{{$t('common.savechanges')}}</button>
  </div>    
</vs-modal>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {codeStr} from 'libs/api.js'
import locales from '../locales/vidLayout.js'
import {mediaPhyApi} from 'share/server/api.js'
import * as actions from 'share/server/vuex/actions/multimedia.js'
import {loadLcdLayoutByName} from 'share/server/utils.js'
import {currLcdInfo} from 'share/server/vuex/getters.js'
import {printObj, copyObj} from 'libs/utils.js'

export default {
  locales,
  vuex: {
    getters: {
      currLcdInfo,
      vidlayout: (state) => state.vidlayout,
      switchLayout: (state) => state.lcd.switchLayout
    },
    actions
  },
  data () {
    return {
      show: false,
      cfg: {
        enable: 0,
        interval: 1
      },
      state: {
        status: '',
        currLayoutName: '',
        switchCount: 0,
        abortCode: 0
      }
    }
  },
  computed: {
    showAbortCode () {
      return codeStr(this, this.state.abortCode)
    },
    showStatus () {
      if (this.state.status) {
        return this.$t(`autoswitch.status.${this.state.status}`)
      } else {
        return this.$t('common.querying')
      }
    }
  },
  methods: {
    clearTimer () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = undefined
      }      
    },
    onQuit () {
      this.show = false
      this.clearTimer()
    },
    getSwtichState () {
      mediaPhyApi.sendCmd('getSwtichState').then(function(res) {
        if (res && res.data && res.data.code === 0) {
          copyObj(this.state, res.data.data)
        }
      }.bind(this))
    },
    onSaveChanges () {
      mediaPhyApi.setDevId(this.currLcdInfo.topoId)
      mediaPhyApi.setCfg({
        _info: {
          switchLayout: {
            enable: this.cfg.enable,
            interval: this.cfg.interval
          }
        }
      }).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          toast.s(this, this.$t('common.success'), '')
          this.getLcdCfg()
        } else {
          toast.code(this, res.data)
        }          
      }.bind(this))
      this.onQuit()
    },
    onShow () {
      copyObj(this.cfg, this.switchLayout)
      this.getSwtichState()
      this.timer = setInterval(this.getSwtichState, this.switchLayout.interval * 1000)
      this.show = true
    }
  },
  ready () {
    ebus.on('show-vid-layout-auto-switch', this.onShow)
  }
}
</script>

<style scoped>
span.input-group-addon {
  min-width: 60px;
}
</style>